<template>
	<div>
		<!-- 轮播图区域 -->
		<mt-swipe :auto="4000">
			<mt-swipe-item v-for="item in lunboList" :key="item.url">
				<img :src="item.url" alt="轮播图">
			</mt-swipe-item>
		</mt-swipe>
		<!-- 九宫格区域 -->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to='/home/newslist'>
					<img src="../../images/menu1.png" alt="新闻资讯">
					<div class="mui-media-body">新闻资讯</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../images/menu2.png" alt="图片分享">
					<div class="mui-media-body">图片分享</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../images/menu3.png" alt="商品购买">
					<div class="mui-media-body">商品购买</div>
					</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../images/menu4.png" alt="留言反馈">
					<div class="mui-media-body">留言反馈</div>
					</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../images/menu5.png" alt="视频专区">
					<div class="mui-media-body">视频专区</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../images/menu6.png" alt="联系我们">
					<div class="mui-media-body">联系我们</div>
				</a>
			</li>
		</ul>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	
	export default {
		data(){
			return {
				lunboList:[
					{id:1,url:'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/22490/31/971/290485/5c0e577bE932967f2/fce034fadf93559c.jpg!cr_1125x549_0_72!q70.jpg.dpg'},
					{id:2,url:'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/11806/24/1268/154393/5c09f112E735ae397/78a0b9f2d197fc1f.jpg!cr_1125x549_0_72!q70.jpg.dpg'},
					{id:3,url:'https://m.360buyimg.com/mobilecms/s750x366_jfs/t21031/96/1109839657/84560/4436e3c7/5b20814bN4d869aa3.jpg!cr_1125x549_0_72!q70.jpg.dpg'},
					{id:4,url:'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/25252/36/983/108448/5c0e4f26E2e716235/25ad28516672f871.jpg!cr_1125x549_0_72!q70.jpg.dpg'},
					{id:5,url:'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/19351/33/482/97008/5c0a3a76E6164a73f/1cc84e352798b936.jpg!cr_1125x549_0_72!q70.jpg.dpg'}
					
				]
			}
		},
		methods: {
			getLunbotu() { // 获取轮播图的方法
				// TODO
// 				this.$http.get('http://vue.studyit.io/api/getlunbo').then(result =>{
// 					if(result.body.status === 0){
// 						this.lunboList = result.body.message
// 					}else{
// 						Toast('轮播图加载失败了！')
// 					}
// 				})
			}
		},
		created(){
			this.getLunbotu()
		}
	}
</script>

<style lang="less" scoped="scoped">
	.mint-swipe{
		height: 200px;
		
		.mint-swipe-item{
			&:nth-child(1){
				background-color: orangered;
			}
			&:nth-child(2){
				background-color: greenyellow;
			}
			&:nth-child(3){
				background-color: skyblue;
			}
		}
	}
	.mui-grid-view.mui-grid-9{
		background-color: #FFF;
		border: none;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
		border:none;
		img{
			width: 40px;
			height: 40px;
		}
		.mui-media-body{
			font-size:12px
		}
	}
	img{
		height:100%;
	}
</style>
